import React, { useEffect, useState } from 'react';
import './index.scss'
import { Button, Table, Form, Input, Modal } from 'antd';
import service from '../../../../api'
import axios from 'axios';
// import { useNavigate } from 'react-router-dom'





const Manage = () => {

    var [couponlist, setcouponlist] = useState([])
    //定义状态
    var [open, setOpen] = useState(false)


    // var navigate = useNavigate()


    useEffect(() => {
        getmanageList()
    }, [])
    // var getmanageList = async () => {
    //     let res = await service.manage.ZJ_managelist()
    //     console.log(res);
    //     if (res.status == 200) {
    //         res.data.forEach((item: any, index: any) => {
    //             return item.key = index;
    //         })
    //         setcouponlist(res.data)
    //     }
    // }
    var getmanageList = async () => {
        var res = await axios({
            url: "http://localhost:3001/manage"
        })
        setcouponlist(res.data)
    }

    //点击删除
    var handledemove = (id: any) => {
        deletsList(id)
        getmanageList()
    }
    var deletsList = async (id: any) => {
        let res = await service.manage.ZJ_managedelete({ id })
        console.log(res);
        getmanageList()
    }

    //点击新增，打开抽屉
    var handleClick = (user: any) => {
        setOpen(true);

    }

    //规定输入格式
    // interface DataType {
    //     id:number;
    //     name: string;
    //     price: number;
    //     Originprice:number;
    //     grouping:string;
    //     salesvolume:number;
    //     stock:number;
    //     creationtime: string;
    //     status:string;
    //   }


    //表格列的配置
    var columns = [
        {
            title: '商品id',
            dataIndex: 'id',
            key: 'id',
            render: (text: any, record: any, index: any) => <div>{record.id}</div>,
        },
        {
            title: '商品',
            dataIndex: 'name',
            key: 'name',
            render: (text: any, record: any, index: any) => <div>{record.name}</div>,
        },
        {
            title: '价格',
            dataIndex: 'price',
            key: 'price',
            render: (text: any, record: any, index: any) => <div>{record.price}</div>,
        },
        {
            title: '原价',
            dataIndex: 'oriPrice',
            key: 'oriPrice',

        },
        {
            title: '商品分组',
            dataIndex: 'proGroping',
            key: 'proGroping',

        },
        {
            title: '当前销量',
            dataIndex: 'salesVolume',
            key: 'salesVolume',

        },
        {
            title: '剩余库存',
            dataIndex: 'stock',
            key: 'stock',

        },
        {
            title: '创建时间',
            dataIndex: 'time',
            key: 'time',

        },
        {
            title: '操作',
            key: 'exit',
            render: (text: any, record: any, index: any) => <div className='exit'><span>编辑</span><span onClick={() => { handledemove(record.id) }}>删除</span></div>,
        },
    ]

    //数据源
    //  const data: DataType[] = [
    //     {
    //       id: 1001,
    //       name: '剃须刀',
    //       price: 180,
    //       Originprice: 210,
    //       grouping:'家居日常',
    //       salesvolume:1245,
    //       stock:2500,
    //       creationtime: '2019-09-19 9:39:39',
    //       status:'上架'
    //     },
    //     {
    //       id: 1002,
    //       name: '沙发',
    //       price: 1880,
    //       Originprice: 2190,
    //       grouping:'家具',
    //       salesvolume:1245,
    //       stock:2500,
    //       creationtime: '2019-09-19 9:39:39',
    //       status:'上架'
    //     },
    //     {
    //         id: 1003,
    //       name: '电视',
    //       price: 7880,
    //       Originprice: 12210,
    //       grouping:'家电',
    //       salesvolume:1245,
    //       stock:2500,
    //       creationtime: '2019-09-19 9:39:39',
    //       status:'下架'
    //     }

    //   ];
    return (
        <div>
            <div className='top'>
                <Button type="primary" className='button'>新建商品</Button>
            </div>
            <div className='bottom'>
                <Table columns={columns} dataSource={couponlist} />
                <Modal title="Basic Modal" open={open} ></Modal>
            </div>
        </div>
    );
};

export default Manage;